:root {
  --spectrum-colorslider-handle-hitarea-border-radius: 0%;
  --spectrum-colorslider-handle-hitarea-width: var(
    --spectrum-global-dimension-size-300
  );
  --spectrum-colorslider-handle-hitarea-height: var(
    --spectrum-global-dimension-size-300
  );
}

.spectrum-ColorControl-hiddenField {
  opacity: 0.0001;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}

.spectrum-ColorSlider-container--horizontal {
  width: var(--spectrum-colorslider-default-length);
}

.spectrum-ColorSlider-container--vertical {
  display: flex;
  flex-direction: column;
  height: var(--spectrum-colorslider-default-length);
}

.spectrum-ColorSlider {
  position: relative;
  display: block;
  width: 100%;
  height: var(--spectrum-colorslider-height);
  border-radius: var(--spectrum-colorslider-border-radius);

  /* Otherwise we randomly drag a file icon */
  user-select: none;
  touch-action: none;

  cursor: default;

  .spectrum-ColorSlider-handle.spectrum-ColorSlider-handle {
    margin: 0;
  }

  /* The checkerboard is a separate element so that the gradient is overlaid on top. */
  &:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: var(--spectrum-colorslider-border-radius);
    background-size: var(--spectrum-global-dimension-static-size-200)
      var(--spectrum-global-dimension-static-size-200);
    background-position: 0 0, 0 var(--spectrum-global-dimension-static-size-100),
      var(--spectrum-global-dimension-static-size-100)
        calc(-1 * var(--spectrum-global-dimension-static-size-100)),
      calc(-1 * var(--spectrum-global-dimension-static-size-100)) 0;
  }

  &.is-focused {
    z-index: 2;
  }

  &.is-disabled {
    pointer-events: none;
  }
}

.spectrum-ColorSlider--vertical {
  display: inline-block;

  width: var(--spectrum-colorslider-vertical-width);
  flex: 1;

  .spectrum-ColorSlider-handle {
    left: 50%;
    top: 0;
  }
}

.spectrum-ColorSlider-handle {
  left: 0;
  top: 50%;

  &:after {
    border-radius: var(--spectrum-colorslider-handle-hitarea-border-radius);
    width: var(--spectrum-colorslider-handle-hitarea-width);
    height: var(--spectrum-colorslider-handle-hitarea-height);
  }
}

.spectrum-ColorSlider-slider {
  composes: spectrum-ColorControl-hiddenField;
}

.spectrum-ColorSlider-labelContainer {
  display: grid;
  grid-template-areas: "label contextualHelp value";
  grid-template-columns: auto 1fr auto;
  justify-items: start;
}

.spectrum-ColorSlider-contextualHelp.spectrum-ColorSlider-contextualHelp {
  grid-area: contextualHelp;
  margin-inline-start: var(--spectrum-global-dimension-size-50);
  margin-top: var(--spectrum-global-dimension-size-25);
}

.spectrum-ColorSlider-valueLabel {
  grid-area: value;
  margin-inline-start: var(--spectrum-global-dimension-size-50);
}
